<template name="home">
	<view>
		<scroll-view>
			<cu-custom bgColor="bg-blue" :isBack="false">
				<block slot="backText"></block>
				<block slot="content">数字车间首页</block>
			</cu-custom>
			<view class="bg-white">
				<view class="grid margin-bottom col-2 ">
					<navigator v-for="(item,index) in middleApps" :key="index" :url="'/pages/mcloud/' + item.name" class="nav-li"
					 navigateTo hover-class="none">
						<view class="flex align-center">
							<image :src="'/static/home/'+item.icon" mode="aspectFill" class="line2-icon"></image>
							<view class="text-df">{{item.title}} <br /> <span class="text-light">{{item.text}}</span></view>
						</view>
					</navigator>
				</view>
			</view>
			<view class="qiun-columns">
				
				<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">生产完成率</view>
		</view>
		<view class="qiun-charts" >
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view> -->

				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">当日工序产量</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumngdzz"
					 @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
				</view>
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">七日合格率曲线图</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				</view>
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">客户订单占比</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
				</view>
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">月度产量对比图</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts" @touchstart="touchColumnwdj"></canvas>
				</view>
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">KPI指标统计</view>
				</view>
				<view class="qiun-charts3">
					<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
					<canvas canvas-id="canvasArcbar2" id="canvasArcbar2" class="charts3" style="margin-left: 250upx;"></canvas>
					<canvas canvas-id="canvasArcbar3" id="canvasArcbar3" class="charts3" style="margin-left: 500upx;"></canvas>
				</view>
				<view class="cu-tabbar-height">
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// import { pathToBase64, base64ToPath } from 'image-tools'
	// import { us,os } from '@/common/util/work.js'
	import uCharts from '@/sdk/u-charts/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	var canvaColumn = null;
	var canvaArea = null;
	var canvaLineA = null;
	var canvaRing = null;
	var canvaColumngdzz = null;
	var changeDatawdj = null;
	var canvaGauge = null;
	export default {
		data() {
			return {
				pixelRatio: 1,
				textarea: '',
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gdzxWidth: '',
				gdzxHeight: '',
				yhtWidth: '',
				yhtHeight: '',
				gdzzWidth: '',
				gdzzHeight: '',
				wdjWidth: '',
				wdjHeight: '',
				ybpWidth: '',
				ybpHeight: '',
				gaugeWidth: 15,
				type: 'default',
				middleApps: [{
						icon: 'line2_icon3.png',
						title: '今日产量',
						'text': '5806',
						'name': 'wangongList'
					},
					{
						icon: 'line2_icon1.png',
						title: '合格率',
						'text': '98%',
						'name': 'pinjianReport'
					},
				],
			}
		},

		created() {
			_self = this;
			this.cWidth3 = uni.upx2px(250); //这里要与样式的宽高对应
			this.cHeight3 = uni.upx2px(250); //这里要与样式的宽高对应
			this.arcbarWidth = uni.upx2px(24);
			this.getServerDatajdt();
			this.gdzxWidth = uni.upx2px(750);
			this.gdzxHeight = uni.upx2px(500);
			this.getServerDatagdzx();

			this.yhtWidth = uni.upx2px(750);
			this.yhtHeight = uni.upx2px(500);
			this.getServerDatayht();
			this.gdzzWidth = uni.upx2px(750);
			this.gdzzHeight = uni.upx2px(500);
			this.getServerDatagdzz();
			this.wdjWidth = uni.upx2px(750);
			this.wdjHeight = uni.upx2px(500);
			this.getServerDatawdj();
			this.ybpWidth = uni.upx2px(750);
			this.ybpHeight = uni.upx2px(500);
			this.getServerDataybp();
		},
		methods: {
			getServerDatajdt() {
				console.log("aaaa1111")
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						res.data = d
						let Arcbar1 = {
							series: []
						};
						let Arcbar2 = {
							series: []
						};
						let Arcbar3 = {
							series: []
						};
						console.log("-------------------1")
						console.log(Arcbar1)
						console.log(Arcbar2)
						console.log(Arcbar3)
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Arcbar1.series = res.data.data.Arcbar1.series;
						Arcbar2.series = res.data.data.Arcbar2.series;
						Arcbar3.series = res.data.data.Arcbar3.series;
						_self.textarea = JSON.stringify(res.data.data.Arcbar);
						_self.showArcbar("canvasArcbar1", Arcbar1);
						_self.showArcbar2("canvasArcbar2", Arcbar2);
						_self.showArcbar3("canvasArcbar3", Arcbar3);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			//这里我做了三个方法，你可以根据需求，传入不同参数，只定义一个方法是没问题的
			showArcbar(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'default',
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						}
					}
				});

			},
			showArcbar2(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: false,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'default',
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							backgroundColor: '#ffe3e8',
							startAngle: 1.25,
							endAngle: 0.75
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
				});

			},
			showArcbar3(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: false,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							startAngle: 0.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
				});

			},
			changeDatajdt() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaArcbar1.updateData({
						series: newdata.series,
						categories: newdata.categories,
						title: { //这里的文案是自定义的，不写是不变的
							name: Math.round(newdata.series[0].data * 100) + '%',
							color: newdata.series[0].color,
							fontSize: 25 * _self.pixelRatio
						},
						subtitle: { //这里的文案是自定义的，不写是不变的
							name: '更新数据',
							color: '#666666',
							fontSize: 15 * _self.pixelRatio
						}
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
			getServerDatagdzx() {
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					data: {},
					success: function(res) {
						res.data = d;
						let LineA = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories = res.data.data.LineA.categories;
						LineA.series = res.data.data.LineA.series;
						_self.textarea = JSON.stringify(res.data.data.LineA);
						_self.showLineA("canvasLineA", LineA);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
					complete() {
						console.log("_________________")
					}
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left'
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.gdzxWidth * _self.pixelRatio,
					height: _self.gdzxHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					},
				});

			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			changeDatagdzx() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition: 'right',
						animation: false
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},


			getServerDatayht() {
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						res.data = d
						let Ring = {
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Ring.series = res.data.data.Ring.series;
						//自定义文案示例，需设置format字段
						for (let i = 0; i < Ring.series.length; i++) {
							Ring.series[i].format = () => {
								return Ring.series[i].name + Ring.series[i].data
							};
						}
						_self.textarea = JSON.stringify(res.data.data.Ring);
						_self.showRing("canvasRing", Ring);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.yhtWidth * _self.pixelRatio,
					height: _self.yhtHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						name: '100%',
						color: '#7cb5ec',
						fontSize: 25 * _self.pixelRatio,
					},
					title: {
						name: '班组统计',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: 0,
							ringWidth: 40 * _self.pixelRatio,
							labelWidth: 15
						}
					},
				});
			},
			touchRing(e) {
				canvaRing.touchLegend(e, {
					animation: false
				});
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
			changeDatayht() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaRing.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
			getServerDatagdzz() {
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						res.data = d
						let Column = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Column.categories = res.data.data.LineA.categories;
						Column.series = res.data.data.LineA.series;
						_self.textarea = JSON.stringify(res.data.data.LineA);
						_self.showColumngdzz("canvasColumn", Column);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showColumngdzz(canvasId, chartData) {
				canvaColumngdzz = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 4,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.gdzzWidth * _self.pixelRatio,
					height: _self.gdzzHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.gdzzWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					},
				});

			},
			touchColumngdzz(e) {
				canvaColumngdzz.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumngdzz.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumngdzz.scrollEnd(e);
				canvaColumngdzz.touchLegend(e, {
					animation: true,
				});
				canvaColumngdzz.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			changeDatagdzz() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaColumngdzz.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition: 'right',
						animation: false
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
			getServerDatawdj() {
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					// url: '../../../../common/data.json',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						res.data = d
						let ColumnMeter = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						ColumnMeter.categories = res.data.data.ColumnMeter.categories;
						//这里的series数据,如果为Meter，series[0]定义为外层数据，series[1]定义为内层数据
						ColumnMeter.series = res.data.data.ColumnMeter.series;
						_self.textarea = JSON.stringify(res.data.data.ColumnMeter);
						_self.showColumnMeter("canvasColumnMeter", ColumnMeter);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showColumnMeter(canvasId, chartData) {
				changeDatawdj = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					rotate: false,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.wdjWidth * _self.pixelRatio,
					height: _self.wdjHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'meter',
							width: _self.wdjWidth * _self.pixelRatio * 0.45 / chartData.categories.length,
							meter: {
								//这个是外层边框的宽度
								border: 4,
								//这个是内部填充颜色
								fillColor: '#E5FDC3'
							}
						}
					}
				});

			},
			touchColumnwdj(e) {
				changeDatawdj.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
			changeDatawdj() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					changeDatawdj.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
			getServerDataybp() {
				let d = require('../../common/data.json');
				uni.request({
					url: 'https://mc.m-cloud.cc/mcloud/sys/randomImage/1',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						res.data = d
						let Gauge = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Gauge.categories = res.data.data.Gauge.categories;
						Gauge.series = res.data.data.Gauge.series;
						_self.textarea = JSON.stringify(res.data.data.Gauge);
						_self.showGauge("canvasGauge", Gauge);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showGauge(canvasId, chartData) {
				canvaGauge = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'gauge',
					fontSize: 11,
					legend: {
						show: false
					},
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.categories[1].color,
						fontSize: 25 * _self.pixelRatio,
						offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge: {
							type: 'default',
							width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
								color: '#FFFFFF',
								childNumber: 5,
								childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
							},
							pointer: {
								width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
								color: 'auto'
							}
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: _self.ybpWidth * _self.pixelRatio,
					height: _self.ybpHeight * _self.pixelRatio,
					dataLabel: true,
				});
			},
			changeDataybp() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					let series = newdata.series;
					let newTitleColor;
					for (let i = 0; i < newdata.categories.length; i++) {
						if (series[0].data <= newdata.categories[i].value) {
							newTitleColor = newdata.categories[i].color;
							break;
						}
					}
					canvaGauge.updateData({
						series: newdata.series, //这里给了新数值
						categories: newdata.categories,
						title: {
							name: Math.round(series[0].data * 100) + '%',
							color: newTitleColor,
							fontSize: 25 * _self.pixelRatio,
							offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
						},
						subtitle: {
							name: '更新数据',
							color: '#666666',
							fontSize: 15 * _self.pixelRatio,
							offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
						}
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
			changeType() {
				this.type = this.type == 'default' ? 'progress' : 'default';
				canvaGauge.opts.extra.gauge.type = this.type;
				if (this.type == 'default') {
					canvaGauge.opts.title.fontSize = 25 * _self.pixelRatio;
					canvaGauge.opts.title.offsetY = 50 * _self.pixelRatio;
					canvaGauge.opts.subtitle.offsetY = -50 * _self.pixelRatio;
				} else {
					canvaGauge.opts.title.fontSize = 35 * _self.pixelRatio;
					canvaGauge.opts.title.offsetY = 0;
					canvaGauge.opts.subtitle.offsetY = 0;
				}
				canvaGauge.updateData({});
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的zztWidth和zztHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}
</style>
